//	上传图片

import React, { useState } from 'react';
import FormItem from 'antd/lib/form/FormItem';
import { message, Radio } from 'antd';
import { deleteFile } from 'src/services/AnalyseManage/index';
import UploadComponent from 'src/pages/AnalyseManage/EditReport/components/Common/UploadComponent';
import ChooseImage from 'src/pages/AnalyseManage/EditReport/components/Common/ChooseImage';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
	pageId: string;
	id: string;
}

const UploadImage = ( props: IProps ) => {
	const { pageId, id, config, onValuesChange } = props;

	const [ fileList, setFileList ] = useState( config.mutual.imageList || [] );

	const [ imageSource, setImageSource ] = useState( config.mutual.imageSource || 'Upload' );

	const initChooseImage = [
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/arrow_up.png',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/arrow_down.png',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/arrow_left.png',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/arrow_right.png',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_img/001.svg',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_img/002.svg',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_img/003.svg',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_img/004.svg',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_img/5.svg',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_img/6.svg',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_img/7.svg',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_img/8.svg',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_img/9.svg',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_img/10.svg',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_img/11.svg',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_img/12.png',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_img/13.png',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_img/14.png',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_img/15.png',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_img/16.png',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_img/17.png',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_img/18.png',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_img/19.png',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_img/20.png',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_img/21.png',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_gif/1.gif',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_gif/2.gif',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_gif/3.gif',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_gif/4.gif',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_gif/5.gif',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_gif/6.gif',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_gif/7.gif',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_gif/8.gif',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_gif/9.gif',
		'https://bdh-document.oss-cn-hangzhou.aliyuncs.com/common/bi_gif/10.gif'

	];

	const handleDelete = async ( file ) => {
		const info = await deleteFile( file );

		if ( info.status === 1 ) {
			message.success( '删除成功' );
			const imageList = [];
			onValuesChange( config.type, config.key, { imageList }, 'mutual' );
			setFileList( imageList );
		}

	};

	const handleUpload = ( imageList ) => {
		onValuesChange( config.type, config.key, { imageList }, 'mutual' );
		setFileList( imageList );
	};

	//	必传的参数，用户服务端根据参数新建资源路径
	const requestData = {
		moduleName: 'bi',
		pageId: pageId,
		imageChartId: id
	};

	const onRadioChange = ( event ) => {
		setImageSource( event.target.value );
		onValuesChange( config.type, config.key, {
			imageSource: event.target.value,
			imageList: []
		}, 'mutual' );
		setFileList( [] );

	};

	const handleChooseImage = ( img ) => {
		setFileList( [ { url: img } ] );
		onValuesChange( config.type, config.key, {
			imageList: [ { url: img } ]
		}, 'mutual' );
	};

	const radioStyle = {
		display: 'block'
	};

	return (

		<div>
			<FormItem
				labelAlign="left" labelCol={ { span: 8 } }
				wrapperCol={ { span: 16 } }>
				<Radio.Group onChange={ onRadioChange } value={ imageSource }>
					<Radio value="Upload" style={ radioStyle }>上传图片</Radio>
					<Radio value="Choose" style={ radioStyle }>使用内置图片素材</Radio>
				</Radio.Group>
			</FormItem>

			<FormItem
				labelAlign="left" labelCol={ { span: 8 } }
				wrapperCol={ { span: 24 } }>
				{
					imageSource === 'Upload' && (
						<UploadComponent
							fileList={ fileList }
							requestData={requestData}
							handleUpload={ ( imageList ) => handleUpload( imageList ) }
							handleDelete={ ( imageList ) => handleDelete( imageList ) }></UploadComponent>
					)
				}

				{
					imageSource === 'Choose' && (
						<ChooseImage fileList={fileList} initChooseImage={initChooseImage} handleChooseImage={handleChooseImage}></ChooseImage>
					)
				}
			</FormItem>


		</div>
	);
};


export default React.memo( UploadImage );
